문제 인식

React vite 기반으로 만든 프로젝트를 vercel에서 실행할 때, / 경로가 아닌 다른 경로에서 새로고침 시 404 not found 에러를 마주쳤다.

문제 원인

SPA 방식에서는 URL이 바뀌면 새로 페이지를 서버로부터 받아오는게 아닌 클라이언트 측에서 컴포넌트만 바꿔주는 방식으로 작동한다. 따라서 /test 경로로 접근하면 실제 test.html 페이지가 존재하는게 아니라 데이터만 다를 뿐이다. 개발 모드나 preview에서는 React가 알아서 인지하고 새로고침 시 index.html를 보내줘서 처리하지만, Vercel이나 nginx등 웹 서버는 실제로 /test.html파일을 찾아서 주려고 한다. 따라서 존재하지 않는 페이지를 찾는다고 생각해 404 not found 응답을 주는 것이다.

해결 방법

현재 프로젝트의 경우 vercel 환경에서 배포되어있기 때문에 vercel에서 리다이렉트 설정을 해주면 된다.

%% vercel.json %%

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

프로젝트 루트경로에 다음과 같은 설정을 추가하면 vercel이 알아서 모든 경로를 홈 경로로 리다이렉트하고 index.html을 내려준다. 이후 클라이언트에서 URL을 인지해 데이터를 갈아끼워 준다.